<template>
	<view>
		<view class="category-container">
			<view class="category-header">
				<view class="title-section">
					<view class="title-section-text">
						演出
					</view>
					<view class="search">
						<uni-icons class="search-icon" type="search" size="25" @click="toSearch"></uni-icons>
					</view>
				</view>
				<view class="category-type-section">
					<view class="category-list" ref="scrollContainer">
						<view class="category-item" v-for="(item,index) in categoryList" :key="index"
							:class="{'selected': item.id == selectTypeId }" @click="selectType(item.id)">
							{{item.name}}
						</view>
					</view>
				</view>

				<view class="common-search-section">
					<view class="condition-search location" @click="locationSearch">
						<view class="condition-search-text">
							{{location}}
						</view>
						<view class="condition-search-arrow">
							<uni-icons type="down" size="15" color="#999"></uni-icons>
						</view>
					</view>
					<view class="condition-search sort" @click="sortTypeSearch(sortType)"
						:class="{'selectWeight': isSelectType}">
						<view class="condition-search-text">
							{{sortType}}
						</view>
						<view class="condition-search-arrow">
							<uni-icons type="up" size="15" color="#999" v-show="isSortArrow"></uni-icons>
							<uni-icons type="down" size="15" color="#999" v-show="!isSortArrow"></uni-icons>
						</view>
					</view>
					<view class="condition-search time" @click="timeSearch">
						<view class="condition-search-text" v-for="(item,index) in timeSort" :key="index">
							{{item}}
						</view>
						<view class="condition-search-arrow">
							<uni-icons type="up" size="15" color="#999" v-show="isTimeArrow"></uni-icons>
							<uni-icons type="down" size="15" color="#999" v-show="!isTimeArrow"></uni-icons>
						</view>
					</view>
				</view>
				<view class="sort-select-section" v-show="isSortArrow">
					<view class="select-list">
						<view class="select-item" v-for="(item,index) in sortTypeList" :key="index"
							:class="{'sortselected': item.id === selectSortTypeId }"
							@click="selectSortType(item.id, item.name)">
							<view class="select-item-text">
								{{item.name}}
							</view>
							<view class="select-item-icon">
								<uni-icons class="select-icon" type="checkmarkempty" size="20" color="#ff6262e2"
									v-show="item.id == selectSortTypeId"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="time-select-section" v-show="isTimeArrow">
					<uni-datetime-picker ref="datetimePickerRef" v-model="range" type="daterange"  :start="minDate"
						@maskClick="maskClick" />
				</view>
				<view class="mask" v-show="isSortArrow" @click="sortTypeSearch"></view>

			</view>
			<view class="category-content">
				<view class="show-list-section">
					<view class="show-list">
						<view class="show-list-item" v-for="(item,index) in testShowList" :key="index"
							@click="toShowDetail(item.id)" v-show="categoryId==item.menuId || categoryId==0">
							<view class="show-list-item-left">
								<view class="show-list-item-left-img">
									<img class="show-list-img" :src="item.imageUrl" alt="" />
								</view>
							</view>
							<view class="show-list-item-right">
								<view class="top-section">
									<view class="show-list-item-right-title">
										{{item.title}}
									</view>
								</view>

								<view class="mid-section">
									<view class="show-list-item-right-time">
										{{item.perfStartTime}} - {{item.perfEndTime}}
									</view>
									<view class="show-list-item-right-addr">
										{{item.venueName}}
									</view>
								</view>
								<view class="bottom-section">
									<view class="show-list-item-right-price">
										￥<text class="inner-font">{{item.minPrice}}</text>起
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		watchEffect,
		watch,
		onBeforeMount
	} from 'vue';
	import {
		sharedState,
		updateState
	} from '@/common/store.js'
	import {
		onShow,
		onHide,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		CATEGORYLIST
	} from '@/common/categoryList.js'

	let categoryId = ref(0);
	//选中的分类id
	let selectTypeId = ref(0);

	let isSelectType = ref(false);


	let categoryList = ref(CATEGORYLIST);
	/**
	 * 时间选择器初始化
	 */
	const single = ref('');
	const datetimesingle = ref('');
	const range = ref([]);
	const datetimerange = ref([]);
	const start = Date.now() - 1000000000;
	const end = Date.now() + 1000000000;

	const datetimePickerRef = ref(null);

	/**
	 * 时间选择器方法
	 */
    const minDate =ref(null);
	watch(range, (newval) => {
		isTimeArrow.value = false;
		console.log('范围选:', newval);
		timeSort.value = [];
		const displayTimeList = [];

		// 清空 displayTimeList
		
	


		// 遍历 newval 数组
		newval.forEach(dateStr => {
			if (dateStr) {
				// 分割日期字符串为 [年, 月, 日]
				const parts = dateStr.split('-');

				// 检查分割后的数组是否有足够的部分
				if (parts.length >= 2) {
					// 获取月份和日期部分，并组合成 "月份-日期" 的格式
					const monthAndDay = `${parts[1]}-${parts[2]}`;

					// 将 "月份-日期" 添加到 displayTimeList 数组中
					displayTimeList.push(monthAndDay);
				}
			}
		});
		
	
	
		
	
		const dateBody = {
			perfStartTime:newval[0],
			perfEndTime:newval[1],
		}
		
		console.log(dateBody);
			uni.request({
				url:`/st/perfDetail/listByPerfDate`,
				data:dateBody,
				method:'POST',
				success:(res)=>{
					if(res.data.code===2000){
						testShowList.value = res.data.data;
					}
					console.log(res.data);
				},
				fail:()=>{
					console.log(获取列表失败)
				}
			})
		
		
		// 更新 displayTimeList 状态
		if (displayTimeList[0] == displayTimeList[1]) {
			timeSort.value.push(displayTimeList[0]);
		} else {
			timeSort.value = displayTimeList;
		}

		// timeSort.value = newval;
	});
	



// 示例演出列表

// 使用示例



	const maskClick = (e) => {
		console.log(e);
		isTimeArrow.value = false;
	};

	//初始化顺序查询列表
	let sortTypeList = ref([{
			id: 0,
			name: "默认顺序"
		},
		{
			id: 1,
			name: "价格升序"
		},
		{
			id: 2,
			name: "价格降序"
		}
	])

	let changSelect = (sortType) => {
		console.log("改变");

	}
	
	

	const testShowList = ref([]);
	const getShowDetail = () => {
		uni.request({
			url: '/st/perfDetail/list',
			method: 'GET',
			success: (res) => {
				if (res.data.code == 200) {
					console.log(res.data);
					testShowList.value = res.data.rows;
					
					
				} else if (res.data.code != 200) {
					console.log(res.data.code, "异常");
				}
			}
		});
	}



	//初始本地查询结果
	let location = ref("北京");
	//初始化类型顺序查询结果
	let sortType = ref(null);
	//类型排序查询id初始化
	let selectSortTypeId = ref(0);
	//初始化时间查询结果
	let timeSort = ref(["开演时间"]);

	//是否显示类型顺序
	let isSortArrow = ref(false);
	//是否显示时间顺序
	let isTimeArrow = ref(false);

	//操作跳转到定位页面
	const locationSearch = () => {
		isSortArrow.value = false;
		isTimeArrow.value = false;
		uni.navigateTo({
			url: "/pages/location/location"
		})

	}

	//操作类型顺序查询
	const sortTypeSearch = (getType) => {
		console.log("改变");
		isSortArrow.value = !isSortArrow.value;
		console.log("isSortArrow:", isSortArrow);
		isTimeArrow.value = false;
		if (sortType.value == getType) {
			isSelectType.value = false;
			console.log(isSelectType.value);
		} else if (sortType.value != getType) {
			isSelectType.value = true;
			console.log(isSelectType.value);
		}
	}

	//操作时间顺序查询
	const timeSearch = () => {
		isTimeArrow.value = !isTimeArrow.value;
		isSortArrow.value = false;

		if (datetimePickerRef.value && datetimePickerRef.value.show) {
			datetimePickerRef.value.show();
		}

	}
	//操作类型查询顺序模块组件的显隐
	const selectSortType = (id, name) => {
		selectSortTypeId.value = id;
		isSortArrow.value = !isSortArrow.value;
		sortType.value = name;
		if(id==1){
			uni.request({
						url: '/st/perfDetail/listAsc',
						method: 'GET',
						success: (res) => {
							if (res.data.code == 200) {
								console.log(res.data);
								testShowList.value = res.data.rows;
								
								
							} else if (res.data.code != 200) {
								console.log(res.data.code, "异常");
							}
						}
					});
		}
		if(id==2){
			uni.request({
						url: '/st/perfDetail/listDesc',
						method: 'GET',
						success: (res) => {
							if (res.data.code == 200) {
								console.log(res.data);
								testShowList.value = res.data.rows;
								
								
							} else if (res.data.code != 200) {
								console.log(res.data.code, "异常");
							}
						}
					});
		}
		if(id==0){
			 getShowDetail();
		}
	}

	const toSearch = () => {
		uni.navigateTo({
			url: "/pages/search/search"
		})
	}
	//分类列表


	let toShowDetail = (id) => {
		let showId = id;
		let showDetailData = {};
		for (const item of testShowList.value) {
			if (item.id == showId) {
				showDetailData = item;
			}
		}
		uni.setStorage({
			key: 'showDetailStorage',
			data: showDetailData,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url: "/pages/showdetail/showdetail?id=" + showId
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});

	}


	watchEffect(() => {
		console.log("sharedState:", sharedState.value);
		//sharedState传递从index.html获取来的数据
		if (sharedState.value == null) {
			selectTypeId.value = 0;
		} else {
			selectTypeId.value = sharedState.value;
			categoryId.value = sharedState.value;
			
		}
	})

	onBeforeMount(() => {
		sortType.value = sortTypeList.value[0].name;
		getShowDetail();
		minDate.value = new Date().getTime();
	})

	let selectType = (selectId) => { //选中id高亮
		selectTypeId.value = selectId;
		categoryId.value = selectId;
	};
</script>

<style lang="scss" scoped>
	.category-container {
		width: 100%;
		// min-height: 100vh;
		height: auto;
		display: block;
		background: #fff;
		color: #333;

		.category-header {
			top: 0px;
			width: 100%;
			height: 140px;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			padding: 0px 15px;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title-section {
				.title-section-text {
					width: auto;
					height: 50px;
					font-size: 24px;
					line-height: 50px;
					float: left;
				}

				.search {
					width: auto;
					height: 50px;
					line-height: 50px;

					.search-icon {
						width: auto;
						height: 50px;
						line-height: 50px;
						float: right;
					}
				}
			}

			.category-type-section {
				width: 100%;
				height: 40px;
				box-sizing: border-box;

				.category-list {
					width: 100%;
					overflow-x: auto;
					overflow-y: hidden;
					white-space: nowrap;
					padding: 0;
					margin: 0;
					height: 40px;
					box-sizing: border-box;

					.category-item {
						display: inline-block;
						width: auto;
						box-sizing: border-box;
						padding-right: 15px;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						color: #999;
					}
				}
			}

			.common-search-section {
				width: 100%;
				height: 50px;

				.condition-search {
					width: auto;
					height: 50px;
					float: left;
					margin-right: 20px;

					.condition-search-text {
						width: auto;
						height: 50px;
						float: left;
						font-size: 13px;
						line-height: 50px;
						color: #999;
						margin-left: 5px;
					}

					.condition-search-arrow {
						width: auto;
						height: 50px;
						float: left;
						line-height: 50px;
						margin-left: 5px;
					}
				}
			}

			.sort-select-section {
				width: 100%;
				height: 120px;
				position: fixed;
				z-index: 1000;
				top: 140px;
				left: 0px;
				background: #fff;

				.select-list {
					width: 100%;
					height: auto;

					.select-item {
						width: 100%;
						height: 40px;
						float: left;
						box-sizing: border-box;
						padding: 0px 15px;

						.select-item-text {
							line-height: 40px;
							float: left;
							text-align: left;
							font-size: 12px;
						}

						.select-item-icon {
							width: auto;
							height: 40px;
							float: right;

							.select-icon {
								line-height: 40px;
								color: #ff6262e2;
							}
						}
					}
				}
			}
		}

		.category-content {
			width: 100%;
			height: auto;
			float: left;
			margin-top: 140px;

			.show-list-section {
				width: 100%;
				height: auto;
				float: left;

				.show-list {
					width: 100%;
					height: auto;
					float: left;
					box-sizing: border-box;
					padding: 0px 15px;
					//#ifdef MP-WEIXIN 

					margin-bottom: 20px;
					// #endif
					// #ifndef MP-WEIXIN 
					margin-bottom: 70px;
					// #endif 

					.show-list-item {
						width: 100%;
						height: 154px;
						float: left;
						margin-top: 25px;

						.show-list-item-left {
							width: auto;
							height: 154px;
							float: left;

							.show-list-item-left-img {
								width: auto;
								height: 154px;
								float: left;

								.show-list-img {
									width: 120px;
									height: 154px;
									float: left;
								}
							}
						}

						.show-list-item-right {
							float: left;
							width: calc(100% - 120px);
							height: 154px;
							box-sizing: border-box;
							padding-left: 25px;
							display: flex;
							flex-direction: column;
							justify-content: space-between; // 子元素之间等间距分布
							align-items: flex-start; // 子元素水平左对齐

							.top-section {
								display: flex;
								flex-direction: column;
								justify-content: center;
								/* 垂直居中 */
								align-items: flex-start;

								/* 水平左对齐 */
								.show-list-item-right-title {
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									text-overflow: ellipsis;
									overflow: hidden;
									width: auto;
									min-height: 30px;
									max-height: 60px;
									font-size: 16px;
									line-height: 30px;
								}
							}

							.mid-section {
								display: flex;
								flex-direction: column;
								justify-content: center;
								/* 垂直居中 */
								align-items: flex-start;

								.show-list-item-right-time {
									font-size: 12px;
									color: #999;
									line-height: 25px;

								}

								.show-list-item-right-addr {
									font-size: 12px;
									color: #999;
									line-height: 25px;
								}
							}

							.bottom-section {
								display: flex;
								flex-direction: column;
								align-items: flex-start;

								.show-list-item-right-price {
									font-size: 12px;
									color: #ff2d2de2;
									font-weight: bold;
									line-height: 30px;

									.inner-font {
										font-size: 20px !important;
									}
								}
							}
						}

					}
				}
			}
		}
	}

	.scroll-view_H {
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;

		.scroll-view-item_H {
			display: inline-block;
			text-align: left;


		}
	}

	.selected {
		color: #ff2d2de2 !important;
		font-weight: bold;
		font-size: 18px !important;
		line-height: 45px !important;
	}

	.click-light {}

	.sortselected {
		color: #ff6262e2 !important;
		font-weight: bold;
		background: #fff8f8;
	}

	.selectWeight {
		font-weight: bold;
	}

	.mask {
		top: 260px;
		left: 0px;
		width: 100%;
		//#ifdef MP-WEIXIN
		height: calc(100vh - 260px);
		// #endif
		// #ifndef MP-WEIXIN 
		height: calc(100vh - 310px);
		// #endif 
		position: fixed;
		background: #333;
		opacity: 0.5;
	}

	:deep {
		.uni-calendar--fixed {
			bottom: 0px !important;
		}

		.uni-date-editor--x {
			display: none;
		}

		.uni-calendar__mask {}

		.uni-datetime-picker--btn {
			background-color: #ff2d2de2 !important;
		}

		.uni-calendar-item--multiple {
			background-color: #fff0f0e2 !important;
		}

		.uni-calendar-item--before-checked,
		.uni-calendar-item--after-checked {
			background-color: #ff2d2de2 !important;
		}
	}
</style>